<template>
  <div class="fab-close">
    <div
      class="detail-header"
      v-bind:style="{'padding-left': ((showUserAvatar.indexOf(queryData.from)>-1)?'80px':'0px')}"
    >
      <div class="detail-header-media" v-if="showUserAvatar.indexOf(queryData.from)>-1">
        <img :src="queryData.avatar" alt :onerror="'javascript:this.src=\''+portrait+'\''" />
      </div>
      <h2>{{ queryData.title }}</h2>
      <p v-bind:style="{'padding-top': (queryData.title==''?'16px':'16px')}">
        <f7-link
          class="padding8"
          v-if="queryData.anonymous==undefined && queryData.uname && queryData.from != 'affiche-detail'"
        >{{ queryData.uname ? queryData.uname : '' }}</f7-link>
        <f7-link
          v-if="queryData.anonymous!=undefined && queryData.uname && queryData.from != 'affiche-detail'"
          class="padding8"
        >
          <!--@click="tipUserInfoItem(queryData.uid, queryData.anonymous)"-->
          {{ queryData.anonymous ? '匿名用户' : (queryData.uname ? queryData.uname :
          '') }}
        </f7-link>
        <f7-link
          v-if="showDepartmentName.indexOf(queryData.from)>-1&&(queryData.department&&queryData.department.name&&queryData.department.name!='')"
          class="padding8"
        >
          <!--@click="tipDepartmentPage(queryData.department.id)"-->
          {{ queryData.department.name ? queryData.department.name : '' }}
        </f7-link>
        <span
          class="detail-header-date"
          v-if="startTimeShow.indexOf(queryData.from)>-1"
        >{{ queryData.start_time.trim().substr(0, 10) }}</span>
        <span
          class="detail-header-date"
          v-if="createTimeShow.indexOf(queryData.from)>-1"
        >{{ queryData.create_time.trim().substr(0, 16) }}</span>
        <span
          class="detail-header-date"
          v-if="queryData.subtitle!=undefined"
        >{{ queryData.subtitle }}</span>
      </p>
    </div>
    <f7-block
      v-if="showTypeBadge.indexOf(queryData.from)>-1&&queryData.type"
      style="margin: 16px 0px 0px 0px;"
    >
      <f7-badge color="green" style="display: inline;padding: 4px 8px;">
        {{ queryData.type == 'person' ?
        '个人' : (queryData.type == 'business' ? '企业' : '部门') }}
      </f7-badge>
    </f7-block>
    <div class="detail-main">
      <!-- 社区活动 -->
      <dl
        class="meeting-content-list"
        v-if="(showActivity.indexOf(queryData.from)>-1)"
        style="margin-bottom: 8px;background: #f4f4f4;padding: 8px 12px;"
      >
        <dd class="meeting-content-item" v-if="queryData.department&&queryData.department.name">
          <span class="meeting-content-title">发布单位：</span>
          <div class="meeting-content-main">
            <span>{{ queryData.department.name ? queryData.department.name : '' }}</span>
          </div>
        </dd>
        <dd class="meeting-content-item" v-if="from == 'dingding'">
          <span class="meeting-content-title">发布人：</span>
          <div class="meeting-content-main">
            <span>{{ queryData.name }}</span>
          </div>
        </dd>
        <dd class="meeting-content-item">
          <span class="meeting-content-title">开始时间：</span>
          <div class="meeting-content-main">
            <span>
              {{ queryData.start_time.trim().substr(0, 16) }}
              <!--{{ queryData.start_time.trim().substr(0, 16) + '至' +
              queryData.end_time.trim().substr(0, 16) }}-->
            </span>
          </div>
        </dd>
        <dd class="meeting-content-item">
          <span class="meeting-content-title">结束时间：</span>
          <div class="meeting-content-main">
            <span>
              {{ queryData.end_time.trim().substr(0, 16) }}
              <!--{{ queryData.start_time.trim().substr(0, 16) + '至' +
              queryData.end_time.trim().substr(0, 16) }}-->
            </span>
          </div>
        </dd>
        <dd class="meeting-content-item">
          <span class="meeting-content-title">活动地点：</span>
          <div class="meeting-content-main">
            <span>{{ queryData.address || '' }}</span>
          </div>
        </dd>
        <dd class="meeting-content-item" style="padding: 16px 0px;">
          <!--<span class="meeting-content-title">地图显示：</span>-->
          <div class="meeting-content-main" style="height: 300px;">
            <!--id="activityMap">-->
            <map-show
              :is-show="true"
              :is-mark="true"
              from="detailComponent"
              v-if="queryData.longitude && queryData.latitude"
              :longitude="queryData.longitude"
              :latitude="queryData.latitude"
              :range="queryData.range"
            ></map-show>
          </div>
        </dd>
        <!--<dd class="meeting-content-item"
            v-if="queryData.from=='wechat-activity'&&(queryData.join_time&&queryData.join_time!='')">
          <span class="meeting-content-title">报名时间：</span>
          <div class="meeting-content-main">
            <span>{{ queryData.join_time?queryData.join_time.trim().substr(0,16):'' }}</span>
          </div>
        </dd>
        <dd class="meeting-content-item"
            v-if="queryData.from=='wechat-activity'&&(queryData.attend_time&&queryData.attend_time!='')">
          <span class="meeting-content-title">签到时间：</span>
          <div class="meeting-content-main">
            <span>{{ queryData.attend_time?queryData.attend_time.trim().substr(0,16):'' }}</span>
          </div>
        </dd>-->
      </dl>
      <h3
        v-if="otherSpecialCssAbout.indexOf(queryData.from)>-1"
        class="detail-content"
        style="font-weight: 400;padding: 0px 0px 8px 0px;"
        v-html="queryData.content||''"
      ></h3>
      <div
        v-if="otherSpecialCssAbout.indexOf(queryData.from)<0"
        class="detail-content"
        style="padding: 0px 0px 8px 0px;"
        v-html="queryData.content||''"
      ></div>
      <!--@click="showPopoverCopyClipboard('.detail-content')"-->
      <!-- 附件 -->
      <dl
        class="knowledge-repo-files"
        style="padding: 8px 0px;"
        v-if="queryData.accessory != undefined && queryData.accessory.length > 0"
      >
        <dd
          class="knowledge-repo-file"
          v-for="el in queryData.accessory"
          :key="el.id"
          @click.stop.prevent="doAccessoryItemSet(el)"
        >
          <!--@click="downloadAccessory(el.path, el.name)">-->
          <img
            class="knowledge-repo-img"
            v-if="imgSuffixArr.indexOf(el.suffiix) > -1"
            :src="el.path?el.path:el.url"
            :alt="el.name"
          />
          <!--:alt="el.name" @click="openImagePreview(el.id)">-->
          <!--@click="downloadAccessory((el.path?el.path:el.url), el.name)">-->
          <p v-else>
            <f7-link>
              <i class="f7-icons">tags</i>
            </f7-link>
            {{ el.name }}
          </p>
        </dd>
      </dl>
    </div>
    <div style="padding: 0px 8px;" v-if="otherSpecialCssAbout.indexOf(queryData.from)<0">
      <div class="line"></div>
    </div>
    <div class="detail-readers" v-if="isShowReadOrAppliedOrComment(queryData.from)">
      <span
        v-if="showLastModifyTime.indexOf(queryData.from)>-1"
        style="font-size: 12px;color: #9E9E9E;"
      >{{ queryData.last_modify_time ? '最后修改时间：' + queryData.last_modify_time : '' }}</span>
      <span v-if="showReadNumber.indexOf(queryData.from)>-1">
        <f7-link
          v-if="queryData.read_number!=undefined"
          @click="toeyeList"
        >{{ queryData.read_number ? queryData.read_number : 0 }} 人已阅读</f7-link>
        <f7-link
          v-if="queryData.subject&&queryData.read_number==undefined"
          @click="toeyeList"
        >{{ queryData.subject.read.read_number ? queryData.subject.read.read_number : 0 }} 人已阅读</f7-link>
      </span>
      <!--<span v-if="showAppliedNumber.indexOf(queryData.from)>-1">
        报名人数<f7-link style="margin: 0px 4px;">
          {{ queryData.count?queryData.count:0 }}
        </f7-link> / {{ queryData.max_num||0 }}
      </span>-->
      <span
        v-if="showAppliedNumber.indexOf(queryData.from)>-1"
      >已报名 {{ queryData.count ? queryData.count : 0 }} 人</span>
    </div>
    <!-- 意见反馈的反馈信息列表 -->
    <div class="feedback-myself-list" v-if="queryData.feedback&&queryData.feedback.length>0">
      <div class="block-title">反馈信息</div>
      <f7-list media-list>
        <li v-for="el in queryData.feedback" :key="el.id">
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">{{ el.create_time || '' }}</div>
              </div>
              <div
                class="item-text"
                style="overflow: visible;max-height: unset;"
              >{{ el.content || '' }}</div>
            </div>
          </div>
        </li>
      </f7-list>
    </div>
    <f7-popover
      class="popover-copy-clipboard"
      @popover:opened="openedCopyText"
      @popover:closed="closedCopyText"
    >
      <f7-list>
        <f7-list-item popover-close title="复制全文" @click="copyText"></f7-list-item>
      </f7-list>
    </f7-popover>
    <photo-browser
      :from="queryData.from"
      :photos="queryData.accessory"
      :initialSlideId="initialSlideId"
      @openPhotoBrowser="openImageItem"
    ></photo-browser>
  </div>
</template>

<script>
import PhotoBrowser from "../components/photo-browser.vue";
import MapShow from "./activity-clock-map.vue";
import Utils from "../../js/mod.utils";
import ToastUtils from "../../mod/utils.toast";
import AlertUtils from "../../mod/utils.alert";
import ConstantUtils from "../../js/vue.constant";
import NcpUtils from "../../js/mod.ncp";
import strings from "../../assets/strings";

export default {
  props: ["queryData", "source"],
  components: {
    PhotoBrowser,
    MapShow
  },
  data() {
    return {
      portrait: ConstantUtils.avatar.person,
      photosBrowserObject: null,
      initialSlideId: -1,
      imgSuffixArr: [".jpg", ".jpeg", ".png", ".gif"],
      // 显示用户头像
      showUserAvatar: [],
      // 创建时间显示
      createTimeShow: [
        "wechat-activity",
        "dingding-activity",
        "workflow-detail",
        "law-detail"
      ],
      // 开始时间显示
      startTimeShow: [],
      // 是否显示部门
      // showDepartmentName: ['wechat-activity', 'dingding-activity'],
      showDepartmentName: [],
      // 是否已读
      showReadNumber: [],
      // 显示全部评论的统计入口
      showAllComment: [],
      // 显示最近修改时间
      showLastModifyTime: [],
      // 已报名人数显示
      showAppliedNumber: [],
      // 社区活动
      showActivity: ["wechat-activity", "dingding-activity"],
      // 要复制的文本
      copyClipboardText: "",
      // 是否隐藏转发的源邮件内容
      isHideEmailForwardMain: true,
      // 附件列表
      // 办事流程、政策法规等特殊样式
      otherSpecialCssAbout: ["workflow-detail", "law-detail"],
      showTypeBadge: ["workflow-detail", "law-detail"],

      // 活动详情的经纬度
      activityLongitude: null,
      activityLatitude: null,
      map: null,
      from: ""
    };
  },
  methods: {
    onCreated() {
      let _this = this;
      _this.from = _this.$f7.data.from;
    },
    onMounted() {
      let _this = this;
      _this.$f7ready(f7 => {
        setTimeout(() => {
          _this.activityLongitude = _this.queryData.longitude || null;
          _this.activityLatitude = _this.queryData.latitude || null;
        }, 800);
      });
    },
    initActivityMap() {
      let _this = this;
      // 百度地图API功能
      _this.map = new BMap.Map("activityMap"); // 创建Map实例
      _this.map.centerAndZoom(
        new BMap.Point(117.1423857884, 36.6637751615),
        14
      );
      _this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      if (_this.activityLongitude && _this.activityLatitude) {
        _this.setMarkAtMap();
      }
    },
    setMarkAtMap() {
      let _this = this;
      _this.map.clearOverlays();
      if (_this.activityLatitude && _this.activityLongitude) {
        var new_point = new BMap.Point(
          _this.activityLongitude,
          _this.activityLatitude
        );
        var marker = new BMap.Marker(new_point); // 创建标注
        _this.map.addOverlay(marker); // 将标注添加到地图中
        _this.map.panTo(new_point);
      }
    },
    isShowReadOrAppliedOrComment(_from) {
      let _this = this;
      return (
        _this.showReadNumber.indexOf(_from) > -1 ||
        _this.showAllComment.indexOf(_from) > -1 ||
        _this.showLastModifyTime.indexOf(_from) > -1 ||
        _this.showAppliedNumber.indexOf(_from) > -1
      );
    },
    openedCopyText() {
      let _this = this;
      Utils.fireEvent(_this, Utils.kEvents.updateIsCloseCopyPopover, {
        isOpened: true,
        el: ".popover-copy-clipboard"
      });
    },
    closedCopyText() {
      let _this = this;
      Utils.fireEvent(_this, Utils.kEvents.updateIsCloseCopyPopover, {
        isOpened: false,
        el: ".popover-copy-clipboard"
      });
    },
    tipAllCommentsPage: function() {
      let _this = this;
      var data = {
        from: _this.queryData.from,
        id: _this.queryData.id,
        title: _this.queryData.title
      };
      Utils.load(_this, "/comments", data, {});
    },
    openImageItem: function(_data) {
      let _this = this;
      _this.photosBrowserObject = _data;
    },
    // 下载附件
    doAccessoryItemSet(item) {
      let _this = this;
      var name = item.name;
      var url = item.url;
      if (name && url) {
        Utils.tipDownloadFile(url, name);
      }
    },
    openImagePreview: function(_id) {
      let _this = this;
      _this.initialSlideId = _id;
      _this.photosBrowserObject.open();
    },
    toeyeList: function() {
      let _this = this;
      var data = {
        type: _this.queryData.from,
        id: _this.queryData.id
      };
      Utils.load(_this, "/knowledge_eye_list/", data, {});
    },
    downloadAccessory: function(_url, _name) {
      let _this = this;
      let nameArr = _name.split(".");
      let suffix = nameArr[nameArr.length - 1];
      AlertUtils.alert.show(
        AlertUtils.param.alert({
          title: strings.alert.download.title,
          buttons: [
            {
              onClick() {}
            },
            {
              onClick() {
                let params = {
                  url: _url,
                  title: _this.$f7.name,
                  type: suffix,
                  description: "附件下载中...",
                  fileName: _name
                };
                NcpUtils.download(_this, params);
              }
            }
          ]
        })
      );
    },
    showPopoverCopyClipboard: function(_divClass) {
      let _this = this;
      _this.copyClipboardText = _this.$$(_divClass).text();
      _this.$f7.popover.open(".popover-copy-clipboard", ".detail-content");
    },
    copyText: function() {
      let _this = this;
      _this.$f7.popover.close(".popover-copy-clipboard");
      Utils.copyTextToClipboard(
        _this.copyClipboardText,
        function() {
          // 成功
          ToastUtils.toast.show(
            ToastUtils.param.toast({ text: strings.toast.copy.success })
          );
        },
        function(errText) {
          // 失败
          ToastUtils.toast.show(ToastUtils.param.toast({ text: errText }));
        }
      );
    }
  },
  created() {
    this.onCreated();
  },
  mounted() {
    this.onMounted();
  }
};
</script>

<style scoped>
.knowledge-repo-img {
  width: 100%;
  display: block;
}

.detail-readers a.link {
  margin-right: 8px;
}

.email-show-button {
  color: #9e9e9e;
  padding: 16px;
}
</style>
